<!-- 商城个人中心收藏商品 -->
<template>
	<view class="content">

		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(1)">
			<!-- 空白页 -->
			<empty v-if="collectList.length === 0"></empty>
			<view class="" v-else>
				<view class="order-item-box" v-for="(item, index) in collectList" :key="index">
					<uni-swipe-action>
						<uni-swipe-action-item @click="cancal(item.pid)" :options="options">
							<view class="order-item" @click="navToDetailPage(item)">
								<view class="goods-box-single">
									<image class="goods-img" :src="item.image" mode="aspectFill"></image>
									<view class="right">
										<text class="title clamp2">
											<image class="lebal" v-if="item.seller_type == 2" src="../../static/images/public/123.png" mode=""></image>
											{{ item.store_name }}
										</text>
										<view class="priceBox">
											<text class="price">{{ item.price }}</text>
											<text class="shell">购买后可获得{{item.blackS}}黑贝壳</text>
										</view>
										<view class="vipPriceBox">
											<text class="vip1">{{ item.price1 }}</text>
											<image src="../../static/images/mall/k1_vip.png" mode=""></image>
											<text class="vip2">{{item.price2}}</text>
											<image src="../../static/images/mall/k2_vip.png" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import {
		collectUser,
		collectDel
	} from '@/api/mall.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty/empty';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import {
		systemConfig
	} from '@/api/public.js'
	export default {
		components: {
			uniLoadMore,
			empty,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FB3737'
					}
				}],
				collectList: [],
				page: 1,
				limit: 10,
				loadStatus: 'loading', //加载更多状态
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				personal_shell_ration: 1
			};
		},
		//加载更多
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData();
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			cancal(id) {
				uni.showLoading({
					mask:true
				})
				collectDel({
					id: id
				}).then(res => {
					uni.hideLoading()
					let _this = this
					this.collectList.forEach((item,index) => {
						if(item.pid == id) {
							_this.collectList.splice(index,1)
						}
					})
				})
			},
			//详情页
			navToDetailPage(item) {
				let id = item.pid;
				uni.navigateTo({
					url: `/mall/product/product?id=${id}`
				});
			},
			//获取商品列表
			async loadData() {
				collectUser({
					page: this.page,
					limit: 20
				}).then(res => {
					this.loadStatus = "more";
					let list = res.data.map((val, key) => {
						val.blackS = (Number(val.price) * ((100 - val.rebate_ratio) * this.personal_shell_ration) / 100).toFixed(2);
						return val;
					})
					this.collectList.push.apply(this.collectList, list);
					if (list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.collectList.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.content {
		height: 100%;
	}

	.list-scroll-content {
		height: 100%;
	}

	.order-item-box:nth-of-type(1) {
		border-top: 20rpx #eee solid;
	}

	.order-item-box {
		border-bottom: 20rpx #eee solid;
	}

	.order-item {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background: #fff;

		.goods-box-single {
			display: flex;

			.goods-img {
				display: block;
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 0 0 24rpx;
				overflow: hidden;

				.title {
					.lebal {
						width: 70rpx;
						height: 28rpx;
					}

					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					height: 70rpx;
					line-height: 35rpx;
					text-align: justify;
				}

				.priceBox {
					display: flex;
					align-items: center;
					height: 70rpx;

					.price {
						font-size: 26rpx;
						color: #FF1F2F;
						font-weight: bold;
						line-height: 30rpx;

						&:before {
							content: '￥';
							font-size: 20rpx;
							margin: 0 2rpx 0 0rpx;
						}
					}

					.shell {
						margin-left: 20rpx;
						line-height: 18rpx;
						font-size: 18rpx;
						color: $mall-price;
						border: 1rpx solid $mall-price;
						border-radius: 6rpx;
						padding: 4rpx;
					}
				}

				.vipPriceBox {
					display: flex;
					align-items: center;
					height: 20rpx;

					text {
						font-size: 20rpx;
						font-weight: bold;

						&:before {
							content: '￥';
							font-size: 14rpx;
							margin: 0 2rpx 0 2rpx;
						}
					}

					.vip2 {
						margin-left: 40rpx;
					}

					image {
						margin-left: 6rpx;
						width: 50rpx;
						height: 20rpx;
					}
				}
			}
		}
	}
</style>
